<template>
  <div id="home" style="position: relative">
    <HeaderPage />
    <div class="content">
      <div class="homeContent">
        <div style="border-bottom: 1px solid #eae0e0">
          <el-button
            style="background-color: green; color: white; margin-bottom: 20px"
            @click="openJoinClass = true"
            >+&nbsp;加入班级</el-button
          >
        </div>

        <!--        课程列表-->
        <div v-if="courseList.length > 0">
          <div
            style="margin-top: 40px"
            v-for="(item, index) in courseList"
            :key="index"
          >
            <div
              style="
                color: #666666;
                height: 25px;
                line-height: 25px;
                font-size: 12px;
                margin: 5px;
              "
            >
              {{ item.year }}
            </div>
            <div style="display: flex; justify-content: start; flex-wrap: wrap">
              <div
                class="course"
                @click="goCourse(course.id)"
                style="
                  width: 200px;
                  height: 100px;
                  border-radius: 10px;
                  line-height: 100px;
                  text-align: center;
                  color: white;
                  margin-right: 20px;
                "
                v-for="(course, index) in item.list"
                :key="index"
                :style="{ backgroundColor: course.themeColor }"
              >
                {{ course.courseName }}
              </div>
            </div>
          </div>
        </div>

        <div v-else>
          <el-empty description="还没有加入班级哦"></el-empty>
        </div>
      </div>
    </div>

    <!--    加入班级表单-->
    <el-dialog title="加入班级" :visible.sync="openJoinClass" width="30%">
      <div style="display: flex; justify-content: center; align-items: center">
        <div style="text-align: center">
          <div style="color: #666666; font-size: 14px">
            班级码&nbsp;(5位字母)
          </div>
          <div>
            <el-input
              style="width: 150px; height: 50px; margin-top: 20px"
              v-model="inputClassNumber"
            ></el-input>
          </div>
          <el-button
            type="primary"
            style="
              width: 92px;
              height: 38px;
              background-color: #1e9fff;
              padding: 0 18px;
              font-size: 14px;
              color: white;
            "
            @click="joinClassBtn"
            >加入班级</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderPage from "@/components/HeaderPage.vue";
import { joinClassByClassNumber } from "@/api/class";
import { getCourseList } from "@/api/course";
export default {
  data() {
    return {
      openJoinClass: false,
      inputClassNumber: "",
      courseList: [],
    };
  },
  mounted() {
    this.$store.dispatch("GetLoginInfo");
    this.getCourses();
  },
  components: {
    HeaderPage,
  },
  methods: {
    // 加入班级
    joinClassBtn() {
      joinClassByClassNumber(this.inputClassNumber)
        .then(() => {
          this.openJoinClass = false;
          this.$message({
            type: "success",
            message: "加入班级成功",
          });
          this.getCourses();
        })
        .catch(() => {});
    },
    // 获取课程列表
    getCourses() {
      getCourseList()
        .then((res) => {
          if (res.code == 200) {
            this.courseList = res.data;
          }
        })
        .catch(() => {});
    },
    // 跳转到课程详情
    goCourse(courseId){
      this.$router.push({
        path:'/course',
        query:{
          courseId: courseId
        }
      })
    }
  },
};
</script>

<style scoped>
.content {
  background-image: url("../../assets/images/home-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 900px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 80px;
  overflow: auto;
}

.homeContent {
  padding: 20px;
  width: 80%;
  background-color: white;
  margin: 60px auto;
  border-radius: 10px;
}
.course:hover {
  cursor: pointer;
}
</style>
